<template>
  <div
    class="block_nodata"
    :class="{mini:size=='mini',large:size=='large',inline:inline}"
  >
    <i class="block_nodata_icon"></i>
    <p>{{msg}}</p>
    <div class="btn_slot">
      <slot name="btns"></slot>
    </div>
  </div>
</template>

<script>
/*
  功能描述  无数据
  创建人    zgf
  更新时间  2019/06/04
  文档地址  http://note.youdao.com/noteshare?id=9aac25ea559aa5079eee719418fb2f95
  备注      
*/
export default {
  name: "ZmNodata",
  props: {
    msg: {
      type: String,
      required: false,
      default: "暂无数据~" //提示，如：暂无数据
    },
    size: {
      type: String,
      default: "small" //small  mini
    },
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less">
@import "../../css/mixin.less";
.nodata-wrapper{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}
.block_nodata{
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 12px;
    &.inline{
        padding-top: 0;
        .block_nodata_icon{
            width: 32px;
            height: 25px;
            margin-right: 5px;
        }
        p{
            display: inline-block;
            vertical-align: middle;
            line-height: 1.6em;
            margin-bottom: 0;
        }
    }
    &.mini{
        .block_nodata_icon{
            width: 63px;
            height: 51px;
        }
    }
    .block_nodata_icon{
        display: inline-block;
        width: 126px;
        height: 103px;
        background-image: url('../../../public/images/nodata_image.png');
        background-size: 100% auto;
        vertical-align: middle;
    }
    p{
        color: #aaa;
        margin:0 0 15px 0;
    }
    .btn_slot{
        .mint-button{
            margin-left: 3px;
            margin-right: 3px;
            padding-left: 40px;
            padding-right: 40px;
        }
    }
}
</style>
